import 'package:flutter/material.dart';
import 'package:my_app/components/text_field_auto_free.dart';

class FormTestPage extends StatefulWidget {
  const FormTestPage({super.key});

  @override
  State<FormTestPage> createState() => _FormTestPageState();
}

class _FormTestPageState extends State<FormTestPage>
      with SingleTickerProviderStateMixin {
  final TextEditingController _unameController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  final GlobalKey _formKey = GlobalKey<FormState>();

  late AnimationController _animationController;
  final radioValues = [
    { 'label': 'Visible', 'value': 'visible' },
    { 'label': 'Opacity', 'value': 'opacity' },
    { 'label': 'Offstage', 'value': 'offstage' },
  ];
  String? _radioValue = 'visible';
  bool? _checkBoxValue = false;

  String? groupValue;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
        vsync: this, //注意State类需要混入SingleTickerProviderStateMixin（提供动画帧计时/触发器）
        duration: const Duration(seconds: 3),
      );
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("登录"),),
      body: SingleChildScrollView(
          child: Form(
            key: _formKey, //设置globalKey，用于后面获取FormState
            autovalidateMode: AutovalidateMode.onUserInteraction,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFieldAutoFree(
                    useFormText: true,
                    controller: _unameController,
                    labelText: "用户名",
                    hintText: "用户名",
                    icon: const Icon(Icons.person),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: const Divider(height: 2, color: Colors.red,)
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFieldAutoFree(
                    useFormText: true,
                    controller: _pwdController,
                    labelText: "密码",
                    hintText: "您的登录密码",
                    icon: const Icon(Icons.lock),
                    borderside: const BorderSide(color: Colors.blue, width: 1),
                    obscureText: true,
                    //校验密码
                    validator: (v) {
                      return v!.trim().length > 5 ? null : "密码不能少于6位";
                    },
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: const Divider(height: 2, color: Colors.red,)
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    controller: _pwdController,
                    decoration: const InputDecoration(
                      contentPadding: EdgeInsets.all(10),
                      labelText: "邮箱",
                      hintText: "您的邮箱地址",
                      isCollapsed: true,
                      icon: Icon(Icons.email),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue, width: 1),
                      ),
                      border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue, width: 1),
                      )
                    ),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: const Divider(height: 2, color: Colors.red,)
                ),
                CheckboxListTile(
                  title: const Text('Checkbox'),
                  value: _checkBoxValue,
                  onChanged: (value) {
                    setState(() {
                      _checkBoxValue = value;
                    });
                  },
                  controlAffinity: ListTileControlAffinity.leading
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: const Divider(height: 2, color: Colors.red,)
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      const Icon(Icons.visibility, color: Color.fromARGB(255, 137, 137, 137),),
                      const SizedBox(width: 16),
                      ...radioValues.map((item) {
                        return Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Radio(
                                value: item['value'],
                                groupValue: _radioValue,
                                onChanged: (value) {
                                  setState(() {
                                    _radioValue = value;
                                  });
                                },
                                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
                              ),
                              Text(item['label']!),
                            ],
                          ),
                        );
                      }).toList()
                    ],
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.red[200]
                  ),
                  child: Visibility(
                    visible: _radioValue == 'visible',
                    child: const Text('Visibility'),
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.green[200]
                  ),
                  child: Opacity( /// 不显示的情况下也会占据位置
                    opacity: _radioValue == 'opacity' ? 1.0 : 0.0,
                    child: const Text('Opacity'),
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.blue[200]
                  ),
                  child: Offstage( /// offstage为true的情况下不可见
                    offstage: _radioValue != 'offstage',
                    child: const Text('Offstage'),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: const Divider(height: 2, color: Colors.red,)
                ),
                RadioListTile(
                  title: const Text('T 1'),
                  subtitle: const Text('sub 1'),
                  value: 'RadioListTile value',
                  groupValue: groupValue,
                  onChanged: (value) {
                    setState(() {
                      groupValue = value;
                    });
                  }
                ),
                RadioListTile(
                  title: const Text('T 2'),
                  subtitle: const Text('sub 2'),
                  value: 'RadioListTile value2',
                  groupValue: groupValue,
                  onChanged: (value) {
                    setState(() {
                      groupValue = value;
                    });
                  }
                ),
              // Padding(
              //   padding: const EdgeInsets.all(24),
              //   child: Column(
              //     children: [
              //       LinearProgressIndicator(
              //         backgroundColor: Colors.grey[200],
              //       ),
              //       const SizedBox(height: 16,),
              //       LinearProgressIndicator(
              //         backgroundColor: Colors.grey[200],
              //         valueColor: const AlwaysStoppedAnimation(Colors.blue),
              //         value: .5, 
              //       ),
              //       SingleChildScrollView(
              //         child: Column(
              //           children: <Widget>[
              //               Padding(
              //               padding: EdgeInsets.all(16),
              //               child: LinearProgressIndicator(
              //                 backgroundColor: Colors.grey[200],
              //                 valueColor: ColorTween(begin: Colors.red, end: Colors.blue)
              //                   .animate(_animationController), // 从灰色变成蓝色
              //                 value: _animationController.value,
              //               ),
              //             )
              //           ],
              //         ),
              //       )
              //     ],
              //   ),
              // ),
              // 登录按钮
              Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: ElevatedButton(
                        child: const Padding(
                          padding: EdgeInsets.all(16.0),
                          child: Text("登录"),
                        ),
                        onPressed: () {
                          // 通过_formKey.currentState 获取FormState后，
                          // 调用validate()方法校验用户名密码是否合法，校验
                          // 通过后再提交数据。
                          if ((_formKey.currentState as FormState).validate()) {
                            //验证通过提交数据
                          }
                        },
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}